<template>
	<basic-container>
		<avue-crud
			:option="option"
			:data="data"
			ref="crud"
			v-model="form"
			:table-loading="loading"
			:permission="permissionList"
			@row-del="rowDel"
			@row-update="rowUpdate"
			@row-save="rowSave"
			:page="page"
			@refresh-change="refreshChange"
			@search-change="searchChange"
			@search-reset="searchReset"
			@current-change="currentChange"
			@size-change="sizeChange"
			@on-load="onLoad"
		>
			<template slot-scope="{ row }" slot="brandLogoUrl">
				<img v-if="row.brandLogoUrl" :src="row.brandLogoUrl" style="width:50px;height:50px;" />
			</template>
			<template slot-scope="{ row }" slot="menu">
				<el-button type="text" icon="el-icon-plus" size="small" @click.stop="addClassBrandClick(row)">添加</el-button>
			</template>
		</avue-crud>
		<el-dialog title="分类品牌" :visible.sync="addBox" width="70%" append-to-body><brand v-if="addBox" :classId="classId"></brand></el-dialog>
	</basic-container>
</template>

<script>
import { getList, remove, update, add, addClassBrand } from '@/api/base/goods/brand';
import { mapGetters } from 'vuex';

export default {
	props: ['classId'],
	data() {
		return {
			form: {},
			query: {},
			loading: true,
			rolesTree: [],
			rolesKeys: [],
			addBox: false,
			page: {
				pageSize: 10,
				currentPage: 1,
				total: 0
			},
			option: {
				size: 'mini',
				tip: false,
				border: true,
				index: false,
				selection: false,
				viewBtn: true,
				rowKey: 'id',
				height: 'auto',
				header: false,
				// calcHeight: 380,80,
				dialogType: 'dialog',
				align: 'center',
				column: [
					{
						label: '排序',
						prop: 'brandSequence',
						rules: [
							{
								required: true,
								message: '请输入排序号',
								trigger: 'blur'
							}
						]
					},
					{
						label: '首字母',
						prop: 'firstWord',
						rules: [
							{
								required: true,
								message: '请输入首字母',
								trigger: 'blur'
							}
						]
					},
					{
						label: '品牌名称',
						prop: 'brandName',
						search: true,
						rules: [
							{
								required: true,
								message: '请输入品牌名称',
								trigger: 'blur'
							}
						]
					},
					{
						label: '品牌图片标识',
						prop: 'brandLogoUrl',
						slot: true,
						rules: [
							{
								required: true,
								message: '请输入品牌名称',
								trigger: 'blur'
							}
						]
					}
					// {
					// 	label: '类别',
					// 	prop: 'brandCategoryName',
					// 	search: true,
					// 	rules: [
					// 		{
					// 			required: true,
					// 			message: '请输入类别名称',
					// 			trigger: 'blur'
					// 		}
					// 	]
					// }
				]
			},
			data: []
		};
	},
	computed: {
		...mapGetters(['permission', 'userInfo']),
		permissionList() {
			return {
				addBtn: this.vaildData('', false),
				viewBtn: this.vaildData('', false),
				delBtn: this.vaildData('', false),
				editBtn: this.vaildData('', false)
			};
		}
	},
	methods: {
		rowSave(row, loading, done) {
			row.position = row.positionIds;
			row.deptName = row.$deptId;
			row.repassword = row.password;
			add(row).then(
				() => {
					loading();
					this.onLoad(this.page);
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
				},
				error => {
					done();
				}
			);
		},
		rowUpdate(row, index, loading, done) {
			row.position = row.positionIds;
			update(row).then(
				() => {
					loading();
					this.onLoad(this.page);
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
				},
				error => {
					done();
				}
			);
		},
		rowDel(row) {
			this.$confirm('确定将选择数据删除?', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					return remove(row.id, this.classId);
				})
				.then(() => {
					this.onLoad(this.page);
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
				});
		},
		searchReset() {
			this.page.currentPage = 1;
			this.query = {};
			this.onLoad(this.page);
		},
		searchChange(params, done) {
			this.page.currentPage = 1;
			this.query = params;
			this.onLoad(this.page, params, done);
		},
		currentChange(currentPage) {
			this.page.currentPage = currentPage;
		},
		sizeChange(pageSize) {
			this.page.pageSize = pageSize;
		},
		refreshChange() {
			this.onLoad(this.page);
		},
		onLoad(page, params = {}, done) {
			this.loading = true;
			params.brandAudit = 1;
			getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
				if (done) {
					done();
				}
				this.loading = false;
				const data = res.data;
				this.page.total = data.count;
				this.data = data.data;
			});
		},
		addClassBrandClick(row) {
			addClassBrand(row.id, this.classId).then(
				res => {
					console.log(res);
					if (res.data.success) {
						this.onLoad(this.page);
						this.$message({
							type: 'success',
							message: '操作成功!'
						});
					} else {
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}
				},
				error => {}
			);
		}
	}
};
</script>

<style></style>
